<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments::head(~{::title})">
		<title>首页</title>
	</head>
	<body>
		<nav th:replace="_fragments::menu(1)"></nav>

		<div class=" m-padded-tb-big m-container">
			<div class="ui container">
				<div class="ui  stackable grid">
					<!--左边博客列表-->
					<div class="eleven wide column">
						<!--头部-->
						<div class="ui top attached segment">
							<div class="ui middle aligned two column	grid">
								<div class="column">
									<h3 class="ui teal header">博客</h3>
								</div>
								<div class="right aligned column">
									共	 <h3 class="ui orange header m-inline-block m-text-thin" th:text="${count}">14</h3> 篇
								</div>
							</div>
						</div>
						<!--中间内容-->
						<div class="ui top attached teal  segment">
							<div class="ui padded vertical segment m-padded-tb-large m-padded-lr-clear" th:each="blog:${pageInfo.list}">
								<div class="ui  mobile reversed stackable grid">
									<div class="  eleven wide column">
										<a th:href="'blog/' + ${blog.id}" style="color: black">
										<h3 class="ui header"  th:text="${blog.title}" >伍兹</h3></a>
										<p class="m-text-thin" th:text="${blog.description}">永远滴神永远滴神永远滴神永远滴神</p>
										<div class="ui stackable grid">
											<div class="eleven wide column">
												<div class="ui mini horizontal  link list">
													<div class="item">
														<img src="https://picsum.photos/id/103/50/50" alt="" class="ui avatar image" />
														<div class="content"><a href="#" class="header" th:text="${blog.user.username}">李军</a></div>
													</div>
													<div class="item">
														<i class="calender icon"></i><span th:text="${#dates.format(blog.createTime,'dd/MM/yyyy')}">2020</span>
													</div>
													<div class="item">
														<i class="eye icon" th:value="${blog.views}"></i> <span th:text="${blog.views}">666</span>
													</div>
												</div>
											</div>
											<div class="right aligned five wide column">
												<a href="#" target="_blank" class=" ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
											</div>
										</div>
										<div class="row">
											<div class="column">
												<div class="ui basic teal left pointing label m-padded-mini m-text-thin" th:text="${blog.tag.name}">方法论</div>
											</div>

										</div>
									</div>
									<div class="five wide column">
										<a href="#" target="_blank">
											<img src="https://picsum.photos/id/1025/200/100" class="ui rounded image" th:src="${blog.firstPicture}" />
										</a>
									</div>
								</div>
							</div>



						</div>

						<!--底部内容-->
						<div class="ui bottom attached segment">
							<div class="ui middle aligned two column	grid">
								<div class="column">
									<div class="item"><a class="ui mini blue basic button" th:href="@{/index(pagenum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></div>
								</div>
								<div class="right aligned column">
									<div class="item"><a class="ui mini blue basic button" th:href="@{/index(pagenum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></div>
								</div>
							</div>
						</div>
					</div>
					<!--右边的top-->
					<div class="five wide column">
						<!--分类-->
						<div class="ui segments">
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="idea icon"></i>分类
									</div>
									<div class="right aligned column">
										<a href="" target="_blank" th:href="@{/types}">more <i class="angle double right icon"></i></a>
									</div>
								</div>
							</div>
							<div class="ui teal segment">
								<div class="ui fluid vertical menu">
									<div th:each="map:${maps}">
									<a href="#"  th:href="@{'toType?id='+${map.key.id}}"  class="item"  >
										<span th:text="${map.key.name}">学习日志</span>
										<div class="ui teal basic  left pointing  label" th:each="number:${map.value}" >
											<span  th:text="${number}">13</span>
										</div>
									</a>
									</div>

								</div>
							</div>

						</div>
						<!--标签-->
						<div class="ui segments">
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="tags icon"></i>标签
									</div>
									<div class="right aligned column">
										<a href="" target="_blank"th:href="@{/tags}">more <i class="angle double right icon"></i></a>
									</div>
								</div>
							</div>
							<div class="ui teal segment">

								<a  href="#" th:href="@{'toTag?id='+${maptag.key.id}}"  target="_blank" class="ui teal basic  left pointing  label m-margin-tb-tiny" th:each="maptag:${maptags}">
									<span th:text="${maptag.key.name}">方法论</span> <div class="detail" th:text="${maptag.value}">23</div>
								</a>

							</div>
						</div>
						<!--最新推荐-->
						<div class="ui segments m-margin-top-large">
							<div class="ui secondary segment ">
								<i class="bookmark icon"></i>最新推荐
							</div>
							<div class="ui  segment"th:each="recommend:${recommend}">
								<a href="#" th:href="'blog/' + ${recommend.id}" th:text="${recommend.title}" target="_blank" class="m-black m-text-thin" >用户故事</a>
							</div>
						</div>
						<!--二维码-->
						<h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
						<div class="ui  centered card" style="width: 10em;">
							<img src="images/cat.jpg" alt="" class="ui rounded image" />
						</div>
					</div>

				</div>
			</div>
		</div>
		<br />
		<br />
		<footer th:replace="_fragments::footer">
		</footer>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
		<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
		<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
		<script src="../static/lib/qrcode/qrcode.min.js"th:src="@{/lib/qrcode/qrcode.min.js}" ></script>
		<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
		<script>
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
			$('#newBlog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog")
		</script>
	</body>
</html>
